<template>
  <div class="report-container">
    <el-card shadow="never">
      <!-- Search Bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.category" 
          placeholder="类别"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
      </div>
 
      <!-- Data Table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        v-loading="showLoading"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="category" label="类别" width="150"/>
        <el-table-column prop="requirement" label="填写要求" width="200"/>
        <el-table-column prop="date" label="数量时间" width="220">
          <template #default="scope">
            <span :style="{color: scope.row.loading  ? '#909399' : ''}">
              {{ scope.row.date  }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="周期内容" width="180" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.content  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="score" label="分数" width="100" align="center"/>
        <el-table-column prop="actualScore" label="实际得分" width="120" align="center">
          <template #default="scope">{{ scope.row.actualScore  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="comment" label="教师评语" width="180" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.comment  || '-' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)"> 修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
 
    <!-- Edit Dialog -->
    <el-dialog v-model="dialogVisible" title="编辑周报" width="50%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="编号">
          <el-input v-model="editForm.id"  disabled></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="editForm.category"></el-input> 
        </el-form-item>
        <el-form-item label="填写要求">
          <el-input v-model="editForm.requirement"></el-input> 
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker 
            v-model="editForm.date" 
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="周期内容">
          <el-input type="textarea" v-model="editForm.content"></el-input> 
        </el-form-item>
        <el-form-item label="分数">
          <el-input-number 
            v-model="editForm.score"  
            :precision="2" 
            :step="0.1" 
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="实际得分">
          <el-input-number 
            v-model="editForm.actualScore"  
            :precision="2" 
            :step="0.1" 
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="教师评语">
          <el-input type="textarea" v-model="editForm.comment"></el-input> 
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
 
// Reactive state 
const showLoading = ref(true)
const dialogVisible = ref(false)
const filter = reactive({
  id: '',
  category: ''
})
 
const editForm = reactive({
  id: '',
  category: '',
  requirement: '',
  date: '',
  content: '',
  score: 0,
  actualScore: 0,
  comment: '',
  loading: false 
})
 
const tableData = ref([
  {
    id: 1,
    category: '第1次周报',
    requirement: '周报不少于30分钟',
    date: '2020-01-13',
    content: '-',
    score: '20.00',
    actualScore: '-',
    comment: '-',
    loading: false 
  },
  {
    id: 2,
    category: '第2次周报',
    requirement: '周报不少于30分钟',
    date: '2020-01-24',
    content: '-',
    score: '20.00',
    actualScore: '-',
    comment: '-',
    loading: false 
  },
  {
    id: 3,
    category: '第3次周报',
    requirement: '周报不少于30分钟',
    date: '2020-02-01',
    content: '-',
    score: '20.00',
    actualScore: '-',
    comment: '-',
    loading: true 
  },
  {
    id: 4,
    category: '第4次周报',
    requirement: '周报不少于30分钟',
    date: '2020-02-15',
    content: '-',
    score: '20.00',
    actualScore: '-',
    comment: '-',
    loading: false 
  },
  {
    id: 5,
    category: '第5次周报',
    requirement: '周报不少于30分钟',
    date: '2020-02-26',
    content: '33333333333333...',
    score: '20.00',
    actualScore: '11',
    comment: '优秀！',
    loading: false 
  },
  {
    id: 6,
    category: '总结',
    requirement: '周报不少于30分钟',
    date: '2020-02-28',
    content: '111111111111111111...',
    score: '100.00',
    actualScore: '100',
    comment: '233333333333333...',
    loading: false 
  }
])
 
const originalData = ref([]) // Save original data for reset 
 
// Computed properties 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    const idMatch = filter.id  ? item.id.toString().includes(filter.id)  : true 
    const categoryMatch = filter.category  ? item.category.includes(filter.category)  : true 
    return idMatch && categoryMatch 
  })
})
 
// Lifecycle hooks 
onMounted(() => {
  // Save original data 
  originalData.value  = JSON.parse(JSON.stringify(tableData.value)) 
  
  setTimeout(() => {
    showLoading.value  = false 
  }, 1000)
})
 
// Methods 
const handleSearch = () => {
  ElMessage.success(' 搜索完成')
}
 
const handleReset = () => {
  filter.id  = ''
  filter.category  = ''
  tableData.value  = JSON.parse(JSON.stringify(originalData.value)) 
  ElMessage.success(' 已重置')
}
 
const handleEdit = (row) => {
  Object.assign(editForm,  JSON.parse(JSON.stringify(row))) 
  // Handle actual score display 
  editForm.actualScore  = editForm.actualScore  === '-' ? 0 : parseFloat(editForm.actualScore) 
  editForm.score  = parseFloat(editForm.score) 
  dialogVisible.value  = true 
}
 
const handleSave = () => {
  // Find the corresponding data item and update 
  const index = tableData.value.findIndex(item  => 
    item.id  === editForm.id  && 
    item.category  === editForm.category  && 
    item.date  === editForm.date  
  )
  
  if (index !== -1) {
    // Handle actual score display 
    editForm.actualScore  = editForm.actualScore  === 0 ? '-' : editForm.actualScore.toString() 
    editForm.score  = editForm.score.toFixed(2) 
    
    tableData.value[index]  = JSON.parse(JSON.stringify(editForm)) 
    ElMessage.success(' 修改成功')
    dialogVisible.value  = false 
  }
}
</script>
 
<style scoped>
.report-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.loading-tip {
  margin-top: 20px;
  color: #909399;
  font-size: 14px;
  text-align: center;
}
 
.el-icon-loading {
  margin-right: 10px;
  animation: rotating 2s linear infinite;
}
 
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
.el-table .cell {
  white-space: nowrap;
}
</style>